/**
 * Flex box container
 * @param {string} ff - flexFlow
 * @param {string} jc - justifyContent
 * @param {string} ai - alignItems
 * @returns
 */
import React, { createContext } from "react";
import {
  styled,
  Box,
  Typography,
  Snackbar,
  Alert,
  Slide,
  IconButton,
} from "@mui/material";
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
function flexBox(ff, jc, ai) {
  return styled(Box)({
    display: "flex",
    flexFlow: ff,
    justifyContent: jc,
    alignItems: ai,
  });
}

/**
 * Flex box: column nowrap, flex-start, flex-start
 */
export const ColumnFlexBoxSS = flexBox(
  "column nowrap",
  "flex-start",
  "flex-start"
);

/**
 * Flex box: column nowrap, center, flex-start
 */
export const ColumnFlexBoxCS = flexBox("column nowrap", "center", "flex-start");

/**
 * Flex box: column nowrap, center, flex-start
 */
export const ColumnFlexBoxBC = flexBox(
  "column nowrap",
  "space-between",
  "center"
);

/**
 * Flex box: column nowrap, flex-start, center
 */
export const ColumnFlexBoxSC = flexBox("column nowrap", "flex-start", "center");

/**
 * Flex box: column nowrap, center, center
 */
export const ColumnFlexBoxCC = flexBox("column nowrap", "center", "center");

/**
 * Flex box: column nowrap, flex-start, flex-end
 */
export const ColumnFlexBoxSE = flexBox(
  "column nowrap",
  "flex-start",
  "flex-end"
);

/**
 * Flex box: column nowrap, flex-start, space-between
 */
export const ColumnFlexBoxSB = flexBox(
  "column nowrap",
  "flex-start",
  "space-between"
);

/**
 * Flex box: column nowrap, space-around, center
 */
export const ColumnFlexBoxAC = flexBox(
  "column nowrap",
  "space-around",
  "center"
);

/**
 * Flex box: column nowrap, space-around, flex-end
 */
export const ColumnFlexBoxAE = flexBox(
  "column nowrap",
  "space-around",
  "flex-end"
);

/**
 * Flex box: row nowrap, flex-start, flex-start
 */
export const RowFlexBoxSS = flexBox("row nowrap", "flex-start", "flex-start");

/**
 * Flex box: row nowrap, center, flex-start
 */
export const RowFlexBoxCS = flexBox("row nowrap", "center", "flex-start");

/**
 * Flex box: row nowrap, flex-start, center
 */
export const RowFlexBoxSC = flexBox("row nowrap", "flex-start", "center");

/**
 * Flex box: row nowrap, space-between, flex-end
 */
export const RowFlexBoxBE = flexBox("row nowrap", "space-between", "flex-end");

/**
 * Flex box: row nowrap, space-between, center
 */
export const RowFlexBoxBC = flexBox("row nowrap", "space-between", "center");

/**
 * Flex box: row nowrap, flex-start, flex-end
 */
export const RowFlexBoxSE = flexBox("row nowrap", "flex-start", "flex-end");

/**
 * Flex box: row nowrap, space-around, center
 */
export const RowFlexBoxAC = flexBox("row nowrap", "space-around", "center");

/**
 * Flex box: row nowrap, space-around, flex-start
 */
export const RowFlexBoxAS = flexBox("row nowrap", "space-around", "flex-start");

/**
 * Flex box: row nowrap, flex-end, center
 */
export const RowFlexBoxEC = flexBox("row nowrap", "flex-end", "center");

/**
 * Flex box: row nowrap, center, center
 */
export const RowFlexBoxCC = flexBox("row nowrap", "center", "center");

/**
 * Flex box: row nowrap, flex-start, space-between
 */
export const RowFlexBoxSB = flexBox(
  "row nowrap",
  "flex-start",
  "space-between"
);

/**
 * Copyright banner
 * @param {object} props
 * @returns
 */
export function Copyright(props) {
  return (
    <Typography variant="foot" color="text.secondary" {...props}>
      {"© "}
      网络与数据工作室
      {new Date().getFullYear()}
    </Typography>
  );
}
/* -----------------------------------------------------
 *                   Common components
 * -----------------------------------------------------*/

/**
 * Snackbar's slide transition
 */
export function SlideTransition(props) {
  return <Slide {...props} direction="down" />;
}

/**
 * Define uniform snackbar
 * @param {Boolean} open - open the snackbar or not
 * @param {function} onClose - called on close
 * @param {text} text - text to display
 * @param {severity} severity - default "warning"
 * @param {string} width - width of the snackbar, default "auto"
 * @param {duration} duration - duration before close, default 5s
 * @returns {React component} snackbar
 */
export function LilySnack({ open, onClose, text, severity, width, duration }) {
  severity = severity || "warning";
  width = width || "auto";
  // default open
  if (open === undefined) {
    open = true;
  }
  // Set duration based on severity
  if (duration === undefined) {
    if (severity === "error") {
      duration = 12000;
    } else if (severity === "warning") {
      duration = 8000;
    } else {
      duration = 5000;
    }
  }
  return (
    <Snackbar
      sx={{ width: width }}
      autoHideDuration={duration}
      anchorOrigin={{ vertical: "top", horizontal: "center" }}
      open={open}
      onClose={onClose}
      TransitionComponent={SlideTransition}
    >
      <Alert onClose={onClose} severity={severity} sx={{ width: "100%" }}>
        {text}
      </Alert>
    </Snackbar>
  );
}

export const Context = createContext();

/**
 * 关键字高光
 * @param {*} text
 * @param {*} keyword
 * @returns
 */
export const highlightKeywords = (text, keyword) => {
  if (!keyword || typeof keyword !== "string") {
    return text;
  }

  const keywordsArray = keyword
    .split(",")
    .map((k) => k.trim())
    .filter((k) => k);

  if (keywordsArray.length === 0) {
    return text;
  }

  const regex = new RegExp(`(${keywordsArray.join("|")})`, "gi");
  const parts = text.split(regex); // 根据关键字分割文本

  return parts.map((part, index) => {
    return keywordsArray.includes(part) ? (
      <span key={index} style={{ color: "#f85455" }}>
        {part}
      </span>
    ) : (
      part
    );
  });
};

export function ReturnButton({ scrollToTop }) {
  return (
    <IconButton
      onClick={scrollToTop}
      variant="contained"
      color="primary"
      sx={{
        position: "fixed",
        bottom: "20px",
        right: "20px",
        zIndex: 1000,
        display: "flex",
        flexDirection: "column",
        alignItems: "center", // 垂直居中
      }}
    >
      <ArrowUpwardIcon sx={{ marginRight: "8px" }} /> {/* 添加向上的箭头图标 */}
      <Typography>
        返回顶部
      </Typography>
    </IconButton>
  );
}
